<template>
    <aside class="com-panel panel-left com-tab">
        <header class="panel-tit">
            <ul class="tab-tit tab-three tab-header">
                <li class="on">布局控件</li>
                <li>字段控件</li>
                <li>已选字段</li>
            </ul>
        </header>
        <div class="panel-content tab-content">
            <section class="content on">
                <div class="widgetForm widget-Form-line">
                    <div class="item" data-target="form-layouts">
                        <div class="preview"> <i class="iconfont icon-liebiao"></i>明细控件</div>
                        <widget-layouts></widget-layouts>
                    </div>
                </div>
            </section>
            <section class="content">
                <div class="widgetForm clearfix" >
                    <div class="item" data-target="form-formLine">
                        <div class="preview"> <i class="iconfont icon-danxingwenbenkuang"></i>文本框</div>
                        <widget-inputext></widget-inputext>
                    </div>
                    <div class="item" data-target="form-mutipleLine">
                        <div class="preview"><i class="iconfont icon-wenben"></i>多行文本框</span></div>
                        <widget-textarea></widget-textarea>
                    </div>
                    <div class="item" data-target="form-describe">
                        <div class="preview"><i class="iconfont icon-wenzi"></i>描述文字</div>
                        <widget-describe></widget-describe>
                    </div>
                    <div class="item" data-target="form-num">
                        <div class="preview"> <i class="iconfont icon-shuzi"></i>数字输入框</div>
                        <widget-num></widget-num>
                    </div>
                    <div class="item" data-target="form-check">
                        <div class="preview"><i class="iconfont icon-duoxuan"></i>多选框</div>
                        <widget-check></widget-check>
                    </div>
                    <div class="item" data-target="form-radio">
                        <div class="preview"><i class="iconfont icon-radiobox "></i>单选框</div>
                        <widget-radio></widget-radio>
                    </div>
                    <div class="item" data-target="form-time">
                        <div class="preview"><i class="iconfont icon-rili"></i>时间区间</div>
                        <widget-datezone></widget-datezone>
                    </div>
                    <div class="item" data-target="form-pic">
                        <div class="preview"> <i class="iconfont icon-pic"></i>上传图片</div>
                        <widget-pic></widget-pic>
                    </div>
                    <div class="item" data-target="form-droplist">
                        <div class="preview"><i class="iconfont icon-xiala"></i>下拉框</div>
                        <widget-drop></widget-drop>
                    </div>
                    <div class="item" data-target="form-btn">
                        <div class="preview"> <i class="iconfont icon-jia"></i>按钮</div>
                        <widget-btn></widget-btn>
                    </div>
                    <div class="item" data-target="form-staff">
                        <div class="preview"><i class="iconfont icon-renyuan"></i>人员选择</div>
                        <widget-staff></widget-staff>
                    </div>
                </div>
            </section>
            <section class="content">

            </section>
        </div>
    </aside>
</template>

<script>
    import widgetLayouts from './widgets/widget-layouts.vue'
    import widgetInputext from './widgets/widget-inputext.vue'
    import widgetTextarea from './widgets/widget-textarea.vue'
    import widgetDescribe from './widgets/widget-describe.vue'
    import widgetNum from './widgets/widget-num.vue'
    import widgetCheck from './widgets/widget-check.vue'
    import widgetRadio from './widgets/widget-radio.vue'
    import widgetDatezone from './widgets/widget-datezone.vue'
    import widgetPic from './widgets/widget-pic.vue'
    import widgetDrop from './widgets/widget-drop.vue'
    import widgetBtn from './widgets/widget-btn.vue'
    import widgetStaff from './widgets/widget-staff.vue'
    export default {
        data() {
            return {}
        },

        components: {
            widgetLayouts,
            widgetInputext,
            widgetTextarea,
            widgetDescribe,
            widgetNum,
            widgetCheck,
            widgetRadio,
            widgetDatezone,
            widgetPic,
            widgetDrop,
            widgetBtn,
            widgetStaff
        }
    }
</script>
